// 按钮相关
$--button-font-weight: 500 !default;
$--button-hover-shade-color: #000 !default;
$--button-hover-tint-color: #fff !default;
$--button-active-shade-color: #000 !default;

// 表单相关
$--form-label-color: var(--el-text-color-primary) !default;
$--form-label-required-color: var(--el-color-danger) !default;
$--form-item-margin-bottom: 18px !default;

// 输入框
$--input-border-color-hover: var(--el-border-color-hover) !default;
$--input-text-color: var(--el-text-color-primary) !default;
$--input-bg-color: var(--el-bg-color) !default;
$--input-disabled-bg-color: var(--el-disabled-bg-color) !default;

// 弹窗（Dialog）
$--dialog-round-border-radius: var(--el-border-radius-round) !default;
$--dialog-font-size: var(--el-font-size-base) !default;

// 菜单（Menu）
$--menu-hover-bg-color: var(--el-fill-color-light) !default;
$--menu-text-color: var(--el-text-color-primary) !default;
$--menu-active-color: var(--el-color-primary) !default;

// 导航栏（NavMenu）
$--nav-menu-horizontal-sub-popover-effect: light-below !default;

// 滚动条（Scrollbar）
$--scrollbar-color: var(--el-text-color-secondary) !default;
$--scrollbar-color-hover: var(--el-text-color-regular) !default;
$--scrollbar-size: 6px !default;
$--scrollbar-width: 6px !default;
$--scrollbar-border-radius: 4px !default;


:root {
  --el-color-white: #f8f9fa;
  --el-color-black: #212529;

  --el-color-primary-rgb: 34, 139, 230;
  --el-color-success-rgb: 40, 167, 69;
  --el-color-warning-rgb: 255, 193, 7;
  --el-color-danger-rgb: 220, 53, 69;
  --el-color-error-rgb: 220, 53, 69;
  --el-color-info-rgb: 23, 162, 184;

  --el-font-size-extra-large: 22px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 18px;
  --el-font-size-base: 16px;
  --el-font-size-small: 14px;
  --el-font-size-extra-small: 12px;

  --el-font-family: "Arial", "Helvetica Neue", sans-serif;
  --el-font-weight-primary: 600;
  --el-font-line-height-primary: 26px;

  --el-index-normal: 10;
  --el-index-top: 1050;
  --el-index-popper: 2050;

  --el-border-radius-small: 3px;
  --el-border-radius-round: 25px;
  --el-border-radius-circle: 50%;

  --el-transition-duration: 0.4s;
  --el-transition-duration-fast: 0.25s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.42, 0, 0.58, 1);
  --el-transition-function-fast-bezier: cubic-bezier(0.25, 1, 0.5, 1);
  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-md-fade: transform var(--el-transition-duration) var(--el-transition-function-fast-bezier), opacity var(--el-transition-duration) var(--el-transition-function-fast-bezier);
  --el-transition-fade-linear: opacity var(--el-transition-duration-fast) linear;
  --el-transition-border: border-color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);
  --el-transition-color: color var(--el-transition-duration-fast) var(--el-transition-function-ease-in-out-bezier);

  --el-component-size-large: 42px;
  --el-component-size: 34px;
  --el-component-size-small: 26px;

  color-scheme: light;

  --el-color-primary: #228be6;
  --el-color-primary-light-3: rgb(102, 184, 255);
  --el-color-primary-light-5: rgb(153, 204, 255);
  --el-color-primary-light-7: rgb(204, 224, 255);
  --el-color-primary-light-8: rgb(229, 239, 255);
  --el-color-primary-light-9: rgb(242, 247, 255);
  --el-color-primary-dark-2: rgb(28, 112, 184);

  --el-color-success: #28a745;
  --el-color-success-light-3: rgb(92, 184, 92);
  --el-color-success-light-5: rgb(123, 204, 123);
  --el-color-success-light-7: rgb(153, 224, 153);
  --el-color-success-light-8: rgb(184, 239, 184);
  --el-color-success-light-9: rgb(214, 247, 214);
  --el-color-success-dark-2: rgb(33, 123, 33);

  --el-color-warning: #ffc107;
  --el-color-warning-light-3: rgb(255, 223, 128);
  --el-color-warning-light-5: rgb(255, 234, 153);
  --el-color-warning-light-7: rgb(255, 245, 179);
  --el-color-warning-light-8: rgb(255, 250, 204);
  --el-color-warning-light-9: rgb(255, 253, 230);
  --el-color-warning-dark-2: rgb(204, 153, 0);

  --el-color-danger: #dc3545;
  --el-color-danger-light-3: rgb(233, 94, 105);
  --el-color-danger-light-5: rgb(240, 133, 145);
  --el-color-danger-light-7: rgb(247, 172, 185);
  --el-color-danger-light-8: rgb(251, 201, 211);
  --el-color-danger-light-9: rgb(254, 230, 236);
  --el-color-danger-dark-2: rgb(184, 46, 58);

  --el-color-error: #dc3545;
  --el-color-error-light-3: rgb(233, 94, 105);
  --el-color-error-light-5: rgb(240, 133, 145);
  --el-color-error-light-7: rgb(247, 172, 185);
  --el-color-error-light-8: rgb(251, 201, 211);
  --el-color-error-light-9: rgb(254, 230, 236);
  --el-color-error-dark-2: rgb(184, 46, 58);

  --el-color-info: #339999;
  --el-color-info-light-3: rgb(77, 192, 205);
  --el-color-info-light-5: rgb(128, 213, 224);
  --el-color-info-light-7: rgb(179, 234, 243);
  --el-color-info-light-8: rgb(204, 242, 247);
  --el-color-info-light-9: rgb(230, 250, 252);
  --el-color-info-dark-2: rgb(20, 123, 140);

  --el-bg-color: #f8f9fa;
  --el-bg-color-page: #e9ecef;
  --el-bg-color-overlay: #ffffff;

  --el-text-color-primary: #212529;
  --el-text-color-regular: #495057;
  --el-text-color-secondary: #6c757d;
  --el-text-color-placeholder: #adb5bd;
  --el-text-color-disabled: #ced4da;

  --el-border-color: #dee2e6;
  --el-border-color-light: #e9ecef;
  --el-border-color-lighter: #f1f3f5;
  --el-border-color-extra-light: #f8f9fa;
  --el-border-color-dark: #ced4da;
  --el-border-color-darker: #adb5bd;

  --el-fill-color: #f1f3f5;
  --el-fill-color-light: #f8f9fa;
  --el-fill-color-lighter: #ffffff;
  --el-fill-color-extra-light: #ffffff;
  --el-fill-color-dark: #e9ecef;
  --el-fill-color-darker: #dee2e6;
  --el-fill-color-blank: #ffffff;

  --el-box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.05), 0px 6px 15px rgba(0, 0, 0, 0.1);
  --el-box-shadow-light: 0px 0px 10px rgba(0, 0, 0, 0.1);
  --el-box-shadow-lighter: 0px 0px 5px rgba(0, 0, 0, 0.1);
  --el-box-shadow-dark: 0px 14px 40px 14px rgba(0, 0, 0, 0.1), 0px 10px 30px rgba(0, 0, 0, 0.15), 0px 6px 12px -6px rgba(0, 0, 0, 0.2);

  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);

  --el-overlay-color: rgba(0, 0, 0, 0.85);
  --el-overlay-color-light: rgba(0, 0, 0, 0.75);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.55);

  --el-mask-color: rgba(255, 255, 255, 0.95);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.35);

  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);

  --el-svg-monochrome-grey: var(--el-border-color);
}

:root {
  --el-color-white: #ffffff;
  --el-color-black: #000000;

  --el-color-primary-rgb: 52, 152, 219;
  --el-color-success-rgb: 46, 204, 113;
  --el-color-warning-rgb: 241, 196, 15;
  --el-color-danger-rgb: 231, 76, 60;
  --el-color-error-rgb: 231, 76, 60;
  --el-color-info-rgb: 52, 152, 219;

  --el-font-size-extra-large: 24px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 18px;
  --el-font-size-base: 16px;
  --el-font-size-small: 14px;
  --el-font-size-extra-small: 12px;

  --el-font-family: "Roboto", "Helvetica Neue", sans-serif;
  --el-font-weight-primary: 500;
  --el-font-line-height-primary: 28px;

  --el-index-normal: 10;
  --el-index-top: 1050;
  --el-index-popper: 2050;

  --el-border-radius-small: 4px;
  --el-border-radius-circle: 50%;

  --el-transition-duration: 0.3s;
  --el-transition-duration-fast: 0.2s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --el-transition-function-fast-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);

  --el-component-size-large: 48px;
  --el-component-size: 40px;
  --el-component-size-small: 32px;

  color-scheme: dark;

  --el-color-primary: #3498db;
  --el-color-primary-light-3: #5dade2;
  --el-color-primary-light-5: #85c1e9;
  --el-color-primary-light-7: #aed6f1;
  --el-color-primary-light-8: #d6eaf8;
  --el-color-primary-light-9: #ebf5fb;
  --el-color-primary-dark-2: #2874a6;

  --el-color-success: #2ecc71;
  --el-color-success-light-3: #58d68d;
  --el-color-success-light-5: #82e0aa;
  --el-color-success-light-7: #abebc6;
  --el-color-success-light-8: #d5f5e3;
  --el-color-success-light-9: #eafaf1;
  --el-color-success-dark-2: #27ae60;

  --el-color-warning: #f1c40f;
  --el-color-warning-light-3: #f4d03f;
  --el-color-warning-light-5: #f7dc6f;
  --el-color-warning-light-7: #f9e79f;
  --el-color-warning-light-8: #fcf3cf;
  --el-color-warning-light-9: #fef9e7;
  --el-color-warning-dark-2: #d4ac0d;

  --el-color-danger: #e74c3c;
  --el-color-danger-light-3: #ec7063;
  --el-color-danger-light-5: #f1948a;
  --el-color-danger-light-7: #f5b7b1;
  --el-color-danger-light-8: #fadbd8;
  --el-color-danger-light-9: #fdecea;
  --el-color-danger-dark-2: #cb4335;

  --el-color-error: #e74c3c;
  --el-color-error-light-3: #ec7063;
  --el-color-error-light-5: #f1948a;
  --el-color-error-light-7: #f5b7b1;
  --el-color-error-light-8: #fadbd8;
  --el-color-error-light-9: #fdecea;
  --el-color-error-dark-2: #cb4335;

  --el-color-info: #3498db;
  --el-color-info-light-3: #5dade2;
  --el-color-info-light-5: #85c1e9;
  --el-color-info-light-7: #aed6f1;
  --el-color-info-light-8: #d6eaf8;
  --el-color-info-light-9: #ebf5fb;
  --el-color-info-dark-2: #2874a6;

  --el-bg-color: #ffffff;
  --el-bg-color-page: #f8f9fa;
  --el-bg-color-overlay: #f0f3f4;

  --el-text-color-primary: #2c3e50;
  --el-text-color-regular: #34495e;
  --el-text-color-secondary: #7f8c8d;
  --el-text-color-placeholder: #bdc3c7;
  --el-text-color-disabled: #d5dbdb;

  --el-border-color: #dcdcdc;
  --el-border-color-light: #e5e5e5;
  --el-border-color-lighter: #eeeeee;
  --el-border-color-extra-light: #f5f5f5;
  --el-border-color-dark: #c0c0c0;
  --el-border-color-darker: #a0a0a0;

  --el-fill-color: #f5f5f5;
  --el-fill-color-light: #fafafa;
  --el-fill-color-lighter: #ffffff;
  --el-fill-color-extra-light: #ffffff;
  --el-fill-color-dark: #f0f0f0;
  --el-fill-color-darker: #e0e0e0;

  --el-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1), 0px 4px 10px rgba(0, 0, 0, 0.05);
  --el-box-shadow-light: 0px 0px 8px rgba(0, 0, 0, 0.05);
  --el-box-shadow-lighter: 0px 0px 4px rgba(0, 0, 0, 0.05);
  --el-box-shadow-dark: 0px 12px 30px rgba(0, 0, 0, 0.15), 0px 8px 20px rgba(0, 0, 0, 0.1);

  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);

  --el-overlay-color: rgba(0, 0, 0, 0.7);
  --el-overlay-color-light: rgba(0, 0, 0, 0.5);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);

  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.4);

  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);

  --el-svg-monochrome-grey: var(--el-border-color);
}


:root[data-theme="dark"] {
  // -----------------------------
  // 基础颜色
  // -----------------------------
  --el-color-white: #121212;
  --el-color-black: #ffffff;

  // 主色调（RGB）
  --el-color-primary-rgb: 33, 150, 243;
  --el-color-success-rgb: 76, 175, 80;
  --el-color-warning-rgb: 255, 193, 7;
  --el-color-danger-rgb: 244, 67, 54;
  --el-color-error-rgb: 244, 67, 54;
  --el-color-info-rgb: 33, 150, 243;

  // -----------------------------
  // 字体设置
  // -----------------------------
  --el-font-size-extra-large: 24px;
  --el-font-size-large: 20px;
  --el-font-size-medium: 18px;
  --el-font-size-base: 16px;
  --el-font-size-small: 14px;
  --el-font-size-extra-small: 12px;

  --el-font-family: "Roboto", "Helvetica Neue", sans-serif;
  --el-font-weight-primary: 500;
  --el-font-line-height-primary: 28px;

  // -----------------------------
  // 层级
  // -----------------------------
  --el-index-normal: 10;
  --el-index-top: 1050;
  --el-index-popper: 2050;

  // -----------------------------
  // 圆角 & 动画
  // -----------------------------
  --el-border-radius-small: 6px;
  --el-border-radius-circle: 50%;

  --el-transition-duration: 0.3s;
  --el-transition-duration-fast: 0.2s;
  --el-transition-function-ease-in-out-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --el-transition-function-fast-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
  --el-transition-all: all var(--el-transition-duration) var(--el-transition-function-ease-in-out-bezier);

  --el-component-size-large: 48px;
  --el-component-size: 40px;
  --el-component-size-small: 32px;

  // -----------------------------
  // 启用深色模式（color-scheme）
  // -----------------------------
  color-scheme: dark;

  // -----------------------------
  // 主题颜色（Hex）
  // -----------------------------
  --el-color-primary: #2196f3;
  --el-color-primary-light-3: #4dabf7;
  --el-color-primary-light-5: #80caff;
  --el-color-primary-light-7: #b3e0ff;
  --el-color-primary-light-8: #d6ebff;
  --el-color-primary-light-9: #eaf2ff;
  --el-color-primary-dark-2: #1976d2;

  --el-color-success: #4caf50;
  --el-color-success-light-3: #7dc37d;
  --el-color-success-light-5: #a3d9a5;
  --el-color-success-light-7: #c8edca;
  --el-color-success-light-8: #ddf3de;
  --el-color-success-light-9: #eff9f0;
  --el-color-success-dark-2: #388e3c;

  --el-color-warning: #ffc107;
  --el-color-warning-light-3: #ffca28;
  --el-color-warning-light-5: #ffd54f;
  --el-color-warning-light-7: #ffe082;
  --el-color-warning-light-8: #ffecb3;
  --el-color-warning-light-9: #fff8e1;
  --el-color-warning-dark-2: #e6a000;

  --el-color-danger: #f44336;
  --el-color-danger-light-3: #f88070;
  --el-color-danger-light-5: #fc8c84;
  --el-color-danger-light-7: #ff9e97;
  --el-color-danger-light-8: #ffb6b2;
  --el-color-danger-light-9: #ffeded;
  --el-color-danger-dark-2: #d32f2f;

  --el-color-error: #f44336;
  --el-color-error-light-3: #f88070;
  --el-color-error-light-5: #fc8c84;
  --el-color-error-light-7: #ff9e97;
  --el-color-error-light-8: #ffb6b2;
  --el-color-error-light-9: #ffeded;
  --el-color-error-dark-2: #d32f2f;

  --el-color-info: #2196f3;
  --el-color-info-light-3: #4dabf7;
  --el-color-info-light-5: #80caff;
  --el-color-info-light-7: #b3e0ff;
  --el-color-info-light-8: #d6ebff;
  --el-color-info-light-9: #eaf2ff;
  --el-color-info-dark-2: #1976d2;

  // -----------------------------
  // 背景颜色
  // -----------------------------
  --el-bg-color: #1e1e1e;             // 主内容区
  --el-bg-color-page: #121212;         // 页面背景
  --el-bg-color-overlay: #2b2b2b;      // 弹层/浮层背景

  // -----------------------------
  // 文字颜色
  // -----------------------------
  --el-text-color-primary: #ffffff;           // 主要文本
  --el-text-color-regular: #e0e0e0;           // 常规文本
  --el-text-color-secondary: #b0b0b0;         // 次要文本
  --el-text-color-placeholder: #616161;       // 占位符
  --el-text-color-disabled: #757575;          // 禁用状态

  // -----------------------------
  // 边框颜色
  // -----------------------------
  --el-border-color: #383838;
  --el-border-color-light: #424242;
  --el-border-color-lighter: #555555;
  --el-border-color-extra-light: #666666;
  --el-border-color-dark: #2a2a2a;
  --el-border-color-darker: #1f1f1f;

  // -----------------------------
  // 填充色（Fill Color）
  // -----------------------------
  --el-fill-color: #2a2a2a;
  --el-fill-color-light: #2f2f2f;
  --el-fill-color-lighter: #333333;
  --el-fill-color-extra-light: #3a3a3a;
  --el-fill-color-dark: #252525;
  --el-fill-color-darker: #1f1f1f;

  // -----------------------------
  // 阴影
  // -----------------------------
  --el-box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 4px 10px rgba(0, 0, 0, 0.2);
  --el-box-shadow-light: 0px 0px 8px rgba(0, 0, 0, 0.2);
  --el-box-shadow-lighter: 0px 0px 4px rgba(0, 0, 0, 0.15);
  --el-box-shadow-dark: 0px 12px 30px rgba(0, 0, 0, 0.4), 0px 8px 20px rgba(0, 0, 0, 0.3);

  // -----------------------------
  // 禁用状态样式
  // -----------------------------
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);

  // -----------------------------
  // 遮罩层 & 叠加层
  // -----------------------------
  --el-overlay-color: rgba(0, 0, 0, 0.7);
  --el-overlay-color-light: rgba(0, 0, 0, 0.5);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.3);

  --el-mask-color: rgba(30, 30, 30, 0.9);           // 深灰半透
  --el-mask-color-extra-light: rgba(30, 30, 30, 0.4);

  // -----------------------------
  // 边框统一变量
  // -----------------------------
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: #666666;
  --el-border: var(--el-border-width) var(--el-border-style) var(--el-border-color);

  // -----------------------------
  // SVG 图标颜色（单色）
  // -----------------------------
  --el-svg-monochrome-grey: #888888;
}